<template>
	<view>
		<view class="header">
			<view class="title">我是你贴心的AI助理</view>
			<view class="sub-title">回答您所有的问题,快速选择一个角色和我聊天吧！</view>
		</view>
		<u-grid :border="false" @click="click">
			<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
				<u-image :src="baseListItem.image" width="120rpx" height="120rpx" shape="circle"></u-image>
				<text class="grid-text">{{ baseListItem.title }}</text>
			</u-grid-item>
		</u-grid>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import chatData from "../common/common.js";
import {
	topicList
	} from '@/common/api.js'

export default {
	data() {
		return {
			baseList: []
		}
	},
	onLoad() {
		this.initData()
	},
	methods: {
		initData() {
			topicList().then(res => {
				this.baseList = res
			})
		},
		click(name) {
			console.log(name);
			this.$store.state.$type = name + 1;
			uni.switchTab({
				url: `/pages/home/home`
			})
		}
	}
}
</script>

<style lang="scss">
.grid-text {
	font-size: 14px;
	color: #5983f3;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}

.header {
	padding: 50rpx;
}

.title {
	font-size: 42rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10rpx;
}

.sub-title {
	font-size: 32rpx;
	text-align: center;
	color: #666;
}
</style>
